<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css文本展开特效</title>
</head>
<style>
    @keyframes tracking-in-expand {
        0% {
            letter-spacing: -0.5em;
            opacity: 0;
        }
        40% {
            opacity: 0.6;
        }
        100% {
            opacity: 1;
        }
    }
    
    .tracking-in-expand {
        color: red;
        text-align: center;
        animation: tracking-in-expand 1.7s 50 cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }
</style>

<body>

    <div class="tracking-in-expand">
        css文本展开特效
    </div>
    <div class="tracking-in-expand">
        CSS text expansion effects
    </div>
    <div>
        <pre>
            1、letter-spacing可以支持动画 
            2、letter-spacing可以负值 
            3、letter-spacing对中文/英文都生效 
        </pre>
    </div>
</body>

</html>